<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>鼠标悬停提示效果-消息提示</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico"> 
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container clearfix">
			<h1 class="title">鼠标悬停提示效果-消息提示</h1>
            <!--S DEMO1-->
			<ul class="grid cs-style-1">
				<li>
					<figure>
						<img src="images/1.png" alt="img01">
						<figcaption>
							<h3>Camera</h3>
							<span>Jacob Cummings</span>
							<a href="#">Take a look</a>
						</figcaption>
					</figure>
				</li>
			</ul>
            <!--E DEMO1-->
            
            <!--S DEMO2-->
            <ul class="grid cs-style-2">
				<li>
					<figure>
						<img src="images/2.png" alt="img02">
						<figcaption>
							<h3>Music</h3>
							<span>Jacob Cummings</span>
							<a href="#">Take a look</a>
						</figcaption>
					</figure>
				</li>
            </ul>
            <!--E DEMO2-->
            
            <!--S DEMO3-->
            <ul class="grid cs-style-3">
				<li>
					<figure>
						<img src="images/4.png" alt="img04">
						<figcaption>
							<h3>Settings</h3>
							<span>Jacob Cummings</span>
							<a href="#">Take a look</a>
						</figcaption>
					</figure>
				</li>
            </ul>
            <!--E DEMO3-->
            
            <!--S DEMO4-->
            <ul class="grid cs-style-4">
				<li>
					<figure>
						<div><img src="images/5.png" alt="img05"></div>
						<figcaption>
							<h3>Safari</h3>
							<span>Jacob Cummings</span>
							<a href="#">Take a look</a>
						</figcaption>
					</figure>
				</li>
            </ul>
            <!--E DEMO4-->
       </div>
       <div class="container">  
            <!--S DEMO5-->
            <ul class="grid cs-style-5">
				<li>
					<figure>
						<img src="images/4.png" alt="img04">
						<figcaption>
							<h3>Settings</h3>
							<span>Jacob Cummings</span>
							<a href="#">Take a look</a>
						</figcaption>
					</figure>
				</li>
			</ul>
            <!--E DEMO5-->
            
            <!--S DEMO6-->
            <ul class="grid cs-style-6">
				<li>
					<figure>
						<img src="images/1.png" alt="img01">
						<figcaption>
							<h3>Camera</h3>
							<span>Jacob Cummings</span>
							<a href="#">Take a look</a>
						</figcaption>
					</figure>
				</li>
            </ul>
            <!--E DEMO6-->
            
            <!--S DEMO7-->
            <ul class="grid cs-style-7">
				<li>
					<figure>
						<img src="images/6.png" alt="img06">
						<figcaption>
							<h3>Game Center</h3>
							<span>Jacob Cummings</span>
							<a href="#">Take a look</a>
						</figcaption>
					</figure>
				</li>
            </ul>
            <!--E DEMO7-->
            
		</div><!-- /container -->
		<script src="js/toucheffects.js"></script>
	</body>
</html>